<template>
  <div class="container">
    <van-nav-bar title="我的" class="userNav" />
    <!-- 未登录 -->
    <van-cell value="" center v-if="!userInfo" class="not-login">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span @click="$router.push('/login')">
          <van-image
            round
            width="1.5rem"
            height="1.5rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          &nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <!-- <van-tag type="danger">标签</van-tag> -->
        <div @click="$router.push('/login')">点击登录</div>
      </template>
      <template #default>
        <div class="iconSty" @click="$router.push('/search')">
          <van-icon name="arrow" />
        </div>
      </template>
    </van-cell>
    <!-- 已登录 -->
    <van-cell value="" center v-else class="logined">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span>
          <van-image
            round
            width="1.5rem"
            height="1.5rem"
            :src="userInfo.avatar"
          />
          &nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <!-- <van-tag type="danger">标签</van-tag> -->
        <div>{{ userInfo.nickname }}</div>
      </template>
      <template #default>
        <div class="iconSty" @click="$router.push('/search')">
          <van-icon name="arrow" />
        </div>
      </template>
    </van-cell>
    <!-- 宫格 -->
    <van-grid class="actionBtn" clickable :column-num="3">
      <van-grid-item
        icon-prefix="toutiao"
        to="/orders"
        icon="dingdan"
        text="我的订单"
      ></van-grid-item>
      <van-grid-item icon-prefix="toutiao" icon="youhuiquan" text="优惠券" />
      <van-grid-item icon-prefix="toutiao" icon="lipinka" text="礼品卡" />
      <van-grid-item
        icon-prefix="toutiao"
        to="/collect"
        icon="shoucang"
        text="我的收藏"
      />
      <van-grid-item
        icon-prefix="toutiao"
        to="/footprint"
        icon="wodezuji"
        text="我的足迹"
      />
      <van-grid-item icon-prefix="toutiao" icon="fankui" text="会员福利" />
      <van-grid-item
        icon-prefix="toutiao"
        to="/address"
        icon="daohang"
        text="地址管理"
      />
      <van-grid-item icon-prefix="toutiao" icon="wode" text="账号安全" />
      <van-grid-item icon-prefix="toutiao" icon="kefu" text="联系客服" />
      <van-grid-item icon-prefix="toutiao" icon="bangzhu" text="帮助中心" />
      <van-grid-item icon-prefix="toutiao" icon="fankui" text="意见反馈" />
    </van-grid>
    <!-- 退出按钮 -->
    <div>
      <van-button block type="default" v-if="userInfo" @click="quitBtn"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { getItem, removeItem } from "@/utils/storage";
export default {
  name: "User",
  data() {
    return {
      // userInfo: this.$store.getters.userInfo || null,
      userInfo: getItem("USERINFO") || null,
    };
  },
  methods: {
    quitBtn() {
      this.$dialog
        .confirm({
          title: "标题",
          message: "是否退出？",
        })
        .then(() => {
          // on confirm
          removeItem("USERINFO");
          removeItem("TOUTIAO_USER");
          this.$store.commit("removeUser", null);
          this.$store.commit("removeUserInfo", null);
          this.$router.replace("/login");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  created() {
    // if (this.$store.getters.token && this.$store.getters.userInfo) {
    //   this.userInfo = this.$store.getters.userInfo
    // }
    console.log(this.$store.getters.userInfo, "123");
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f4f4f4;
  height: 1400px;
}
/deep/ .van-nav-bar__title {
  color: #fff !important;
}
/deep/ .van-hairline--bottom::after {
  border: none;
}
/deep/ .van-cell__title {
  display: flex;
  align-items: center;
}
.not-login,
.logined {
  background: #333;
  color: #fff;
  .iconSty {
    float: right;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    color: #000;
  }
}
/deep/ .van-cell::after {
  border: none;
}
.actionBtn {
  margin-bottom: 40px;
  // padding-bottom: 100px;
}
/deep/ .van-cell__title {
  display: flex;
  align-content: center;
  align-items: center;
}
</style>
